<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生管理</el-breadcrumb-item>
      <el-breadcrumb-item>反馈建议</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <!-- 提示 -->
      <el-alert
        title="tips:群众的意见是我们变得更好的动力，一定要合理采纳群众的意见！"
        type="success"
        :closable="false"
      ></el-alert>
      <!-- 搜索框 -->
      <!-- <el-row :gutter="30">
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="queryInfo.keyWord" clearable @clear="getSuggestionList">
            <el-button slot="append" icon="el-icon-search" @click="getSuggestionList"></el-button>
          </el-input>
        </el-col>
      </el-row> -->
      <!-- 建议表格 -->
      <el-table :data="suggestionList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="建议人" prop="studentName"></el-table-column>
        <el-table-column label="建议类型" prop="adviceType"></el-table-column>
        <el-table-column label="建议内容" prop="adviceContent"></el-table-column>
        <el-table-column label="删除">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="删除该条建议" placement="bottom">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-delete"
                @click="removeSuggestion(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
      > -->
      <!-- :total="100" -->
      <!-- </el-pagination> -->
    </el-card>
  </div>
</template>

<script>
import commonServe from '../../api/services/common.serve'
export default {
  data() {
    return {
      suggestionList: []
      // queryInfo: {
      //   keyword: '',
      //   pageSize: 10,
      //   pageIndex: 1
      // }
    }
  },
  created() {
    this.getSuggestionList()
  },
  methods: {
    // 获取建议内容
    getSuggestionList() {
      commonServe
        .getAllSuggestionList()
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.suggestionList = res.data.list
            // this.$message.success('获取建议列表成功')
          } else {
            this.$message.warning('获取建议列表失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    },
    // pageSize改变的事件
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.getSuggestionList()
    },
    // pageIndex改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pageIndex = newPage
      this.getSuggestionList()
    },
    // 删除建议
    async removeSuggestion(val) {
      console.log(val)
      const confirmResult = await this.$confirm('此操作将永久删除该条建议，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除建议')
      }
      commonServe
        .removeSuggestionById(val)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('删除建议成功')
            this.getSuggestionList()
          } else {
            this.$message.warning('删除失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.message)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
